<template>
  <div>
    <a-card :bordered="false" :style="{ marginTop: '12px',height:'450px' }">
      <span slot="title"> <a-icon type="tags" style="color:#3393FC;margin-right: 5px" theme="filled"/>快捷入口</span>
      <a slot="extra" @click="handleFast">更多</a>
      <template>
        <a-row type="flex" :wrap="true" align="middle" :gutter="12">
          <a-col :span="6" v-for="(menu, index) in fastList" :key="index">
            <a-tooltip placement="top" :title="menu.name">
              <a-button
                type="primary"
                @click="routerFast(menu.url)"
                shape="round"
                ghost
                style="margin-top: 10px"
                block>
                <div class="text-wrap">{{ menu.name }}</div>
              </a-button>
            </a-tooltip>
          </a-col>
        </a-row>
      </template>
    </a-card>
    <user-fast-modal ref="fastModal" @ok="getFastList"></user-fast-modal>
  </div>
</template>

<script>
import UserFastModal from '@views/dashboard/UserFastModal'
import {getAction} from '@api/manage'

export default {
    name: 'EoaCmsCommUse',
    components: {
      UserFastModal
    },
    data () {
      return {
        url: {
          getFastList: '/api/erpmng/sys/permission/queryUserQuickMenu'
        },
        fastList: []
      }
    },
    created() {
      this.getFastList()
    },
    methods: {
      routerPush(item, path, name) {
        if (item.children && item.children.length > 0) {
          path = item.children[0].path
          name = item.children[0].name
        } else {
          path = item.path
          name = item.name
        }
        this.$router.push({
          path: path,
          name: name
        })
      },
      routerFast(path, name) {
        this.$router.push({
          path: path,
          name: name
        })
      },
      handleFast: function () {
        this.$refs.fastModal.show()
      },
      getFastList() {
        getAction(this.url.getFastList).then((res) => {
          this.fastList = res.result
        })
      }
    }
  }
</script>

<style>
.text-wrap {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
